<template>
  <div >
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>办公审批</span>
      </div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- 下拉框 -->
        <el-form-item label="申请人" prop="applicant">
          <el-select v-model="ruleForm.applicant" placeholder="请选择申请人" style="width: 100%;">
            <el-option  v-for="item in employeeSelect" :key="item.id" 
                    :label="item.account" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

      <!-- 日期 -->
        <el-form-item label="申请日期" prop="created">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.created" style="width: 100%;"></el-date-picker>
        </el-form-item>

        <!-- 下拉框 -->
        <el-form-item label="申请商品" prop="apply_goods">
          <el-select v-model="ruleForm.apply_goods" placeholder="请选择申请商品" style="width: 100%;">
            <el-option v-for="item in officeSupplies" :key="item.key" 
                :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申请数量" prop="apply_goods_num">
        <el-input-number v-model="ruleForm.apply_goods_num"  :min="1" :max="10" label="申请数量"></el-input-number>
        </el-form-item>

        <el-form-item label="申请原因" prop="apply_reason">
          <el-input type="textarea" placeholder="请选择申请原因" v-model="ruleForm.apply_reason"></el-input>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即申请</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {userEmployee,officeCreate} from '@/api/http' 
import {officeSupplies} from '@/common/selectData'

export default {
  data(){
    return {
      employeeSelect:[], //查询所有员工下拉数据
      officeSupplies, //办公商品
      ruleForm:{
        applicant:'',//申请人
        apply_goods:'', //申请商品
        apply_goods_num:'', //申请数量
        apply_reason:'',//申请原因
        created:'', //申请日期
      },
      rules:{  //校验
        applicant: [
            { required: true, message: '请选择申请人', trigger: 'change' }
        ],
        apply_goods: [
          { required: true, message: '请选择申请人', trigger: 'change' }
        ],
        created: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        apply_goods_num: [
          { required: true, message: '请选择申请人', trigger: 'change' }
        ],
        apply_reason: [
          { required: true, message: '请输入申请原因', trigger: 'blur' }
        ],
      }
    }
  },
  mounted(){
    this.getEmployee();
  },
  methods:{
    getEmployee(){  //查询所有员工
      userEmployee().then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          this.employeeSelect = data;
        }
      })
    },
    submitForm(formName){  //提交数据
      this.$refs[formName].validate((valid) => {
          if (valid) {
           officeCreate(this.ruleForm).then(res=>{
              let {code} = res.data;
              if(code==20000){
                this.$router.push("/approvalManage/officeManage") //跳转‘申请管理-办公审批’
              }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    }
  }
}
</script>


